<template>
	<view class="content">
		<view class="box" >
			<image src="../../static/images/logo.png"  >
		</image></view>
		<view class="form-box">
			<!-- <view v-show="tabIndex==1"> -->
				<view class="row-input-code">
					<view class="input-box">
						<input placeholder="请输入手机号" maxlength="11" type="number" v-model="phone" />
					</view>		
				</view>
				<view style="display: flex; flex-direction: row; justify-content: center">
					<view class="row-input">
							<view class="input-box">
								<input v-model="code" placeholder="请输入短信验证码" maxlength="6" type="number" style="width: 80%;"/>
							</view>
					</view>
					<view class="code-box" @click="startCountdown" :class="{ 'disabled': countdown > 0 }">
							{{ buttonText }}
						</view>
						<view v-if="showMessage" class="message">
									{{ message }}
						</view>
					</view>
				</view>
				<view class="login-btn" :class="{ 'register': tabIndex === 1, 'active': isCodeCorrect }" @click="phoneLogin">
				    立即登录
				</view>
				<view class="container">
					<view class="checkbox-container">
								<checkbox-group @change="handleCheckboxChange">
									<checkbox :checked="agreedTerms" class="checkbox"></checkbox>
								</checkbox-group>
								<view class="agree-txt">
								<p>同意并遵守 <text style="font-weight: bold;">《智测心控服务条款》</text><p>和</p><text style="font-weight: bold;">《隐私条款》</text>
								</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
import {login} from "@/api/login";

	export default {
	  data() {
	    return {
	      countdown: 0,
	      showMessage: false,
	      message: "验证码已发送",
	      agreedTerms: false,
	      tabIndex: 0,
	      isCodeCorrect: false,
				phone:'',
				code:'',
				isRead:false
	    };
	  },
	  computed: {
	    buttonText() {
	      return this.countdown > 0 ? `${this.countdown}s后重新发送` : "获取验证码";
	    },
	  },
	  methods: {
			handleCheckboxChange(e) {
				this.agreedTerms = !this.agreedTerms
			},
			showTip(mes) {
				uni.showToast({
					title: mes,
					icon: 'none',
					duration: 2000
				})
			},
	    getCode() {
	      uni.showToast({
	        title: "获取验证码"
	      });
	    },
			// 登录成功后，处理函数
			phoneLogin() {
				console.log(this.phone)
				if (this.phone.length ==  0) {
					this.showTip("手机号格式不正确！")
					return
				}
				if(this.code.length == 0) {
					this.showTip("请输入验证码")
					return;
				}
				console.log(this.agreedTerms)
				if(!this.agreedTerms) {
					this.showTip("请同意条款！")
					return
				}
				
				login(this.phone,this.code).then(res => {
					console.log(res)
					uni.showToast({
						title: "登陆成功",
						icon: 'success',
						duration: 2000
					})
					this.$store.dispatch("Login",{
						phone:this.phone,
						code:this.code
					}).then(() => {
						console.log(this.$store.state)
						uni.switchTab(
						 {
							 url: '/pages/homepage/index'
						 }
						)
					}).catch(() => {
          console.log("登录失败")
        });

				})
			},
	    startCountdown() {
	      if (this.countdown === 0) {
	        this.showMessage = true;
	        this.countdown = 120;
	        const countdownTimer = setInterval(() => {
	          this.countdown -= 1;
	          if (this.countdown <= 0) {
	            this.showMessage = false;
	            clearInterval(countdownTimer);
	          }
	        }, 1000);
	        // 设置 1 秒后隐藏消息
	        setTimeout(() => {
	          this.showMessage = false;
	        }, 500);
	      }
	    },
	    async login1() {
	      // 获取用户输入的验证码，假设存储在 this.userEnteredCode
	      const userEnteredCode = "123456"; // 假设用户输入的验证码是 "123456"
	      // 调用后端接口进行验证码校验
	      try {
	        const response = await this.$myRuquest({
	          url: '/api/verifycode',
	          method: 'post',
	          data: {
	            enteredCode: userEnteredCode,
	          },
	        });
	
	        // 根据后端返回的数据判断验证码是否正确
	        if (response.data.success) {
	          // 验证码正确，设置 isCodeCorrect 为 true
	          this.isCodeCorrect = true;
						uni.navigateTo({
			            url: '/pages/xueya/xueya', 
			      });
	          // 其他登录逻辑...
	        } else {
	          // 验证码不正确，可以做相应处理，例如提示用户
	          console.error("验证码错误");
	        }
	
	        if (!this.agreedTerms) {
	          // 如果隐私政策未勾选，弹出确认勾选弹窗
	          this.showConfirmDialog();
	          return; // 阻止登录操作
	        }
	      } catch (error) {
	        // 处理请求失败的情况
	        console.error("验证码校验请求失败", error);
	      }
	    },
	showConfirmDialog() {
	  uni.showModal({
	    title: '提示',
	    content: '请先阅读并同意《用户协议》和《隐私政策》',
	    success: (res) => {
	      if (res.confirm) {
			// 用户点击确认按钮，记录用户登录时间
			this.recordLoginTime();
	        // 用户点击确认按钮，执行登录逻辑
	        this.login();
	      } else {
	        // 用户点击取消按钮，不执行任何操作
	        console.log('点击了取消');
	      }
	    }
	  });
	},

	  },
	};

</script>

<style lang="scss">
	page {
		background-color: #f2f6fe;
	}


	.box {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-top: 100rpx;
	}
	
	.row-input {
		margin: 0 10rpx 10rpx 10rpx;
		// margin-top: 20rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: row;
		border-radius: 8rpx;
		align-items: center;
		height: 60rpx;
		width: 50%;
		background-color: #FFFFFF; /* 白色背景 */
		border: 1rpx solid #ccc; 
		border-radius: 10rpx; 
	}
		.code-box {
		 width:40%;
		 height: 60rpx;
		 margin-right: 10rpx;
		 background-color:#FFFFFF ; 
		 color: #44aae8;
		 border: 1rpx solid #ccc; 
		 border-radius: 10rpx; 
		 display: flex;
		 align-items:center;
		 cursor: pointer;
		 }
		
		.message {
		  position: fixed;
		  margin-left: 5rpx;
		  top: 50%;
		  left: 50%;
		  color: #FFFFFF;
		  transform: translate(-50%, -50%);
		  background-color: #797979;
		  padding: 10px;
		  border: 1px solid #ccc;
		  border-radius: 20px;
		}
		
		.row-input-code {
		  display: flex;
			justify-content: flex-start;
			flex-direction: row;
		  align-items: center;
		  height: 60rpx;
		  margin: 20rpx 10rpx 10rpx 10rpx;
		  background-color: #FFFFFF; /* 白色背景 */
		  border: 1rpx solid #ccc; 
		  border-radius: 10rpx; 
		  padding: 0 20rpx; /* 内边距，根据需要调整 */
	

		.menu-link {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 70rpx;
			color: #007AFF;
			font-size: 24rpx;
		}	
	}
	
	.login-btn {
		margin: 0 10rpx 10rpx 10rpx;
		display: flex;
		  justify-content: center;
		  align-items: center;
		  height: 60rpx;
		  border-radius: 10rpx;
		  font-size: 25rpx;
		  letter-spacing: 4rpx;
		  color: #FFFFFF;
		  margin-top: 20rpx;
		  background: #cdcdcd;
	}
	
	.login-btn.register {
	  background: #cdcdcd;
	}
	
	.login-btn.active {
	  background: linear-gradient(to right, #38b2e3, #5ec3cf);
	}
	
	.container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.checkbox-container {
	    display: flex;
	    align-items: center;
	    
	    .checkbox {
	      margin-right: 10rpx;
	  	align-items: center;
	    }
	    
	    .agree-txt {
	    	display: flex;
	    	justify-content: center;
	    	align-items: center;
	    	height: 70rpx;
	    	font-size: 24rpx;
			.txt
			{
				font-weight: bold;
			}
	    }		
	}
</style>